<template>
    <div>
      <div class="maincomm">
        <div class="comm_hander">
          <h1 class="title">商品管理</h1>
          <el-button type="primary" @click="addComm" icon="el-icon-plus">添加商品</el-button>
        </div>
        <div class="comm_Search">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input class="input" v-model="input" placeholder="关键词"></el-input>
          <el-button @click="commSearch" class="inquireBtn">查询</el-button>
        </div>
        <div class="comm_Content">
          <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="id" label="id" width="80"></el-table-column>
            <el-table-column prop="name" label="信息" width="680"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span>{{ scope.row.status | types }}</span>
                <el-button
                  size="mini"
                  type="warning"
                  style="float:right"
                  class="btna"
                  @click.prevent="UnderComm(scope.row)"
                >{{scope.row.status | types2}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="操作">
              <template slot-scope="scope">
                <a @click.prevent="detail(scope.row)">查看</a>
                &nbsp;&nbsp;
                <a @click.prevent="updata(scope.row)">编辑</a>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top:1%"
            background
            :current-page="currpage"
            :total="total"
            :page-size="pagesize"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { product,updateStatus,searchIDName  } from "@/api/index";
  export default {
    data() {
      return {
        options: [
          {
            value: "ID",
            label: "按商品ID查询"
          },
          {
            value: "name",
            label: "按商品名称查询"
          }
        ],
        value: "",
        input: "",
        tableData: [],
        pagesize: 10,
        // 记录分页器点击的页码
        currpage:  Number(localStorage.getItem("index"))||1 ,
        total: 0,
        type: ""
      };
    },
    mounted() {
      product({pageNum:Number(localStorage.getItem("index")) || 1}).then(res=>{
        console.log(res)
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    methods: {
      UnderComm(v) {
       console.log(v.id,v.status)
       this.$confirm('此操作将上架商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          updateStatus({productId:v.id,status:v.status==1?2:1}).then(res=>{
            console.log(res.data)
            // 修改成功后 （数据库 ）  更新界面
            product({pageNum:this.currpage}).then(res1=>{
              console.log(res1)
              this.tableData = res1.data.data.list;
              this.total = res1.data.data.total;
            })

            this.$message({
              type: 'success',
              message: res.data.data
            });
          })

        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });

  
      },
      updata(v) {
        //  console.log(v.id)
      if (v.id) {
        //  query 传参
          this.$router.push({
            path: `/updata`,
            query: {
              data: v.id
            }
          });
        } else {
          return;
        }
      },
      //详情  params  
      detail(v) {
        console.log(v)
        if(v.id){
          // 编程式路由
          this.$router.push({
            name : "detail",
            params:{
              data: v.id
            }
          })
        }else {
          return;
        }
      },
      //搜索   id/name
      commSearch() {
       console.log(this.value)
       if (this.value) {
          if (this.value ==="ID") {
            this.type = "productId"
          } else {
            this.type = "productName"
          }

          searchIDName({
              [this.type] : this.input,
              pageNum:this.currpage
            }).then(res =>{
              console.log(res)
              this.tableData = res.data.data.list;
              this.total = res.data.data.total;
          }).catch((err)=>{
              console.log(err)
          })
       } else {
          product({ pageNum:this.currpage }).then(res=>{
            console.log(res)
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          })
       }
      },
      //添加
      addComm() {
        this.$router.push("/addcom")
      },
      handleCurrentChange(cpage) {
       this.currpage = cpage;
       localStorage.setItem("index",cpage)



       product({pageNum:this.currpage}).then(res=>{
        console.log(res)
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
       })
      },
      handleSizeChange(psize) {
        product({pageSize:psize}).then(res=>{
          console.log(res)
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
      }
    },
    filters: {
     types(val){
       return val == 1 ? "在售" : "已下架"
     },
     types2(val){
      // 三个状态位  if elseif else    switch()
      return val == 2 ? "上架" : "下架"
     },
    }
  };
  </script>
  
  
  <style scoped>
  .btna {
    width: 30%;
    height: 30px;
    background: orange;
    color: #fff;
    margin-left: 5%;
    padding: 5px;
    text-align: center;
  }
  .comm_Content {
    margin-top: 1%;
  }
  .inquireBtn {
    margin-left: 1%;
  }
  .input {
    width: 18%;
    margin-left: 1%;
  }
  .comm_Search {
    display: flex;
    justify-content: left;
  }
  .comm_hander {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .title {
    display: inline-block;
    font-weight: normal;
  }
  .maincomm {
    width: 95%;
    margin: 0 auto;
  }
  </style>